<template>
  <div class="content-wrap">
    <van-nav-bar title="啊哈哈" left-arrow @click-left="$router.go(-1)">
      <van-icon name="ellipsis" slot="right" @click="$router.push({name: 'groupSetting', params: {id: $route.params.id}})"/>
    </van-nav-bar>
    <div class="scroll-wrapper" ref="scrollBox">
      <div class="chat-list">
        <div class="time-line">
          <span class="time-text">20:45</span>
        </div>
        <div class="chat-item left">
          <div class="avatar">
            <img src="">
          </div>
          <div class="message-box">123</div>
        </div>
        <div class="chat-item right" v-for="i in list" :key="i.id">
          <div class="message-box">{{i.msg}}</div>
        </div>
      </div>
    </div>
    <div class="footer-wrap">
      <div class="send-msg-wrap">
        <van-icon name="add-o" @click="morePlayShowType = morePlayShowType === 1 ? -1 : 1"></van-icon>
        <input type="text" v-model.trim="message" class="send-msg-input" @click="morePlayShowType = -1">
        <van-icon name="smile-o" @click="morePlayShowType = morePlayShowType === 2 ? -1 : 2"></van-icon>
        <span class="send" :class="{active: message.length > 0}">
          <i class="iconfont icon-icon_sent"></i>
        </span>
      </div>
      <div class="more-play-wrap" v-if="morePlayShowType === 1">
        <div class="play-item">
          <van-uploader>
          <span class="icon">
            <i class="iconfont icon-tupian1"></i>
          </span>
          </van-uploader>
          <span class="text">照片</span>
        </div>
        <div class="play-item">
          <span class="icon" @click="$router.push({name: 'selectFriend', params: {id: $route.params.id}})">
            <i class="iconfont icon-geren6"></i>
          </span>
          <span class="text">名片</span>
        </div>
        <div class="play-item">
          <span class="icon" @click="redBagShow = true">
            <i class="iconfont icon-hongbao1"></i>
          </span>
          <span class="text">红包</span>
        </div>
      </div>
      <div class="emoji-wrap" v-if="morePlayShowType === 2">
        <van-swipe indicator-color="#999" :loop="false">
          <van-swipe-item v-for="(item, index) in emojiList" :key="index">
            <div class="slide-li" v-for="l in item" :key="l">
              <span @click="addEmoji">{{l}}</span>
            </div>
          </van-swipe-item>
        </van-swipe>

        <div class="bottom-btn-wrap">
          <div class="select-type-wrap">
            <div class="type-item active">
              <van-icon name="smile-o"></van-icon>
            </div>
          </div>
          <div class="right-btn-wrap">
            <div class="btn-item clickable" @click="backSpace">
              <i class="iconfont icon-backspace"></i>
            </div>
            <div class="btn-item send-btn" :class="{active: message.length > 0}">发送</div>
          </div>
        </div>
      </div>
    </div>

    <van-popup
      v-model="redBagShow"
      position="bottom"
      :style="{ height: '100%' }"
      class="red-packet"
    >
      <div class="red-packet-header">
        <div class="close-btn" @click="redBagShow = false">取消</div>
        <div class="title">发红包</div>
        <div class="tips-btn">
          <van-icon name="question-o" @click="redPacketTip"></van-icon>
        </div>
      </div>

      <van-cell-group class="section-group">
        <van-field v-model="redPacketMoney" placeholder="0.00">
          <div slot="label">
            <span class="red">￥</span>
            <span>金额</span>
          </div>
        </van-field>
      </van-cell-group>

      <van-cell-group class="section-group">
        <van-field v-model="redPacketDesc" type="textarea" placeholder="恭喜发财，大吉大利" rows="3">
        </van-field>
      </van-cell-group>

      <p class="desc">可提现金额：0.00元</p>
      <p class="desc">可提现金额才能用于发红包</p>

      <h1 class="main-money">￥ 0.00</h1>
      <van-button type="danger" block>确定</van-button>
      <br/>
      <p class="desc txt-center">未领取的红包，将于12小时后发起退款</p>
    </van-popup>
  </div>
</template>

<script>
  import emoji from '@/utils/emoji'

  export default {
    name: 'chat',
    data () {
      return {
        list: [],
        message: '',
        morePlayShowType: -1,
        redBagShow: false,
        redPacketMoney: '',
        redPacketDesc: ''
      }
    },
    watch: {
      list () {
        this.refreshScroll()
      }
    },
    computed: {
      emojiList () {
        const emojiList = this.chunk(emoji, 24)
        return emojiList
      }
    },
    methods: {
      refreshScroll () {
        this.$nextTick(() => {
          this.$refs.scrollBox.scrollTop = 1000000
        })
      },
      backSpace () {
        if (this.isEmojiCharacter(this.message.slice(this.message.length - 2, this.message.length))) {
          this.message = this.message.slice(0, this.message.length - 2)
        } else {
          this.message = this.message.slice(0, this.message.length - 1)
        }
      },
      addEmoji (e) {
        this.message += e.target.innerHTML
      },
      redPacketTip () {
        this.$dialog.alert({
          message: '人均单个红包金额最低1元 \n 最高2000元'
        }).then(() => {
        })
      },
      chunk (array, size) {
        // 获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
        const length = array.length
        // 判断不是数组，或者size没有设置，size小于1，就返回空数组
        if (!length || !size || size < 1) {
          return []
        }
        // 核心部分
        let index = 0 // 用来表示切割元素的范围start
        let resIndex = 0 // 用来递增表示输出数组的下标

        // 根据length和size算出输出数组的长度，并且创建它。
        let result = new Array(Math.ceil(length / size))
        // 进行循环
        while (index < length) {
          // 循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
          result[resIndex++] = array.slice(index, (index += size))
        }
        // 输出新数组
        return result
      },
      isEmojiCharacter (substring) {
        for (let i = 0; i < substring.length; i++) {
          let hs = substring.charCodeAt(i)
          if (hs >= 0xd800 && hs <= 0xdbff) {
            if (substring.length > 1) {
              let ls = substring.charCodeAt(i + 1)
              let uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000
              if (uc >= 0x1d000 && uc <= 0x1f77f) {
                return true
              }
            }
          } else if (substring.length > 1) {
            let ls = substring.charCodeAt(i + 1)
            if (ls === 0x20e3) {
              return true
            }
          } else {
            if (hs >= 0x2100 && hs <= 0x27ff) {
              return true
            } else if (hs >= 0x2B05 && hs <= 0x2b07) {
              return true
            } else if (hs >= 0x2934 && hs <= 0x2935) {
              return true
            } else if (hs >= 0x3297 && hs <= 0x3299) {
              return true
            } else if (hs === 0xa9 || hs === 0xae || hs === 0x303d || hs === 0x3030 || hs === 0x2b55 || hs === 0x2b1c || hs === 0x2b1b || hs === 0x2b50) {
              return true
            }
          }
        }
      }
    },
    created () {
      setTimeout(() => {
        let arr = []
        for (let i = 0; i < 100; i++) {
          arr.push({
            id: i,
            name: i + 'ABC',
            msg: 'asdasdasdasd' + i
          })
        }
        this.list = this.list.concat(arr)
        this.refreshScroll()
      }, 500)

      setTimeout(() => {
        let arr = []
        for (let i = 0; i < 2; i++) {
          arr.push({
            id: i + 100,
            name: i + 'ABC',
            msg: 'asdasdasdasd' + i
          })
        }
        this.list = this.list.concat(arr)
      }, 4000)
    }
  }
</script>

<style scoped lang="scss">
  .scroll-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .chat-list {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  .time-line {
    display: flex;
    align-items: center;
    justify-content: center;

    .time-text {
      padding: .1rem .2rem;
      color: #fff;
      background: #dddedf;
      font-size: .24rem;
      border-radius: .3rem;
    }
  }

  .chat-item {
    display: flex;
    align-items: center;
    padding: .3rem .2rem;

    &.right {
      justify-content: flex-end;

      .message-box {
        background: #a6eb77;
        border-radius: .2rem .2rem 0 .2rem;
        border: 1px solid #a0db78;
      }
    }

    &.left {
      justify-content: flex-start;

      .message-box {
        border-radius: 0 .2rem 0.2rem 0.2rem;
        border: 1px solid #e6e7e9;
        background: #fff;
      }
    }

    .message-box {
      font-size: .26rem;
      line-height: 1.5;
      display: inline-block;
      padding: .2rem;
      max-width: 80%;
      word-break: break-word;
      text-align: left;
    }

    .avatar {
      width: .8rem;
      height: .8rem;
      background: #7e8c8d;
      border-radius: 50%;
      overflow: hidden;
      margin-right: .2rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .footer-wrap {
    position: relative;
    z-index: 500;
    background: #f9f9f9;
    border-top: 1px solid #dfdfdf;

    .send-msg-wrap {
      display: flex;
      align-items: center;
      padding: .2rem 0.2rem .2rem;

      .van-icon {
        font-size: .6rem;
        color: #767882;
      }

      .send-msg-input {
        flex: 1;
        margin: 0 .2rem;
        border: 1px solid #dfdfdf;
        height: .6rem;
        border-radius: 6px;
        padding: 0 .14rem;
      }

      .send {
        display: flex;
        align-items: center;
        justify-content: center;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        border: 1px solid #767882;
        margin-left: .14rem;

        &.active {
          border-color: rgb(3, 183, 3);
          background: rgb(3, 183, 3);

          i {
            color: #fff;
          }
        }

        i {
          font-size: .32rem;
          color: #767882;
        }
      }
    }

    .more-play-wrap {
      display: flex;
      align-items: center;
      padding: .1rem 0 .3rem;

      .play-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 25%;
        text-align: center;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 1.2rem;
          height: 1.2rem;
          border: 1px solid #efefef;
          border-radius: 50%;
          background: #fff;
          margin-bottom: .2rem;

          i {
            color: #767882;
            font-size: .5rem;
          }
        }

        .text {
          color: #98989a;
          font-size: .26rem;
        }
      }
    }

    .emoji-wrap {
      .van-swipe-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: .4rem;

        .slide-li {
          width: 12.5%;
          height: 2em;
          font-size: .48rem;
          text-align: center;
          line-height: 2em;
        }
      }

      .bottom-btn-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #ebebeb;
        height: .8rem;
        background: #fff;

        .select-type-wrap {
          display: flex;
          align-items: center;
          height: 100%;

          .type-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            font-size: .56rem;

            &.active {
              background: #ddd;
            }
          }
        }

        .right-btn-wrap {
          display: flex;
          align-items: center;
          height: 100%;

          .btn-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;

            &.send-btn {
              width: 3.4em;
              text-align: center;
              box-shadow: -1px 1px 4px #b8b6b4;
              background: #eee;
              color: #666;
              font-size: .3rem;
              font-weight: bold;

              &.active {
                background: #007aff;
                color: #fff;
              }
            }

            .iconfont {
              font-size: .4rem;
              color: #8b8b8b;
              padding: 0 .24rem;
            }
          }
        }
      }
    }
  }

  .red-packet {
    padding: 0 .3rem;
    background: #efeef3;

    .red-packet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .3rem 0;
      margin-bottom: .4rem;

      .close-btn {
        cursor: pointer;
        font-size: .28rem;
        color: #333;
        font-weight: bold;
        width: 3em;
      }

      .title {
        font-size: .4rem;
        flex: 1;
        text-align: center;
        font-weight: bold;
      }

      .tips-btn {
        text-align: right;
        width: 3em;
        font-size: .28rem;
        color: #007aff;

        i {
          font-size: .4rem;
          cursor: pointer;
        }
      }
    }

    .section-group {
      margin-bottom: .3rem;
    }

    .desc {
      color: #999;
      font-size: .24rem;
      line-height: 1.5;
    }

    .main-money {
      font-size: 1rem;
      color: #000;
      font-weight: bold;
      text-align: center;
      margin: 1rem 0 .3rem;
    }
  }

  .transfer {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0 0;
    background: #efeef3;
    .transfer-header {
      padding: 0 .3rem;
      .close-btn {
        cursor: pointer;
        font-size: .28rem;
        color: #333;
        font-weight: bold;
        width: 3em;
      }
    }

    .msg-wrap {
      text-align: center;
      margin-top: 2rem;
      .avatar {
        width: .8rem;
        height: .8rem;
        border-radius: 50%;
        margin-bottom: .2rem;
      }
      .name {
        font-size: .28rem;
        font-weight: bold;
        color: #333;
      }
    }

    .money-content {
      flex: 1;
      padding: .5rem;
      border-radius: .2rem .2rem 0 0;
      background: #fff;
      margin-top: .4rem;

      .title {
        font-size: .28rem;
      }

      .input-wrap {
        display: flex;
        align-items: center;
        margin-top: .3rem;
        padding-bottom: .1rem;
        .label {
          font-size: .6rem;
          font-weight: bold;
        }
        .money {
          font-weight: bold;
          font-size: .8rem;
          flex: 1;
          margin-left: .2rem;
        }
      }
      .desc-input {
        margin-top: .2rem;
        font-size: .32rem;
        margin-bottom: .8rem;
      }
    }
  }
</style>
